<template>
	<view class="drop-index">
		<view class="drop-box">
			<view class="droplist" v-for="(item,index) in areaList" :key="index" @click="popupShow(item)">
				<view :class="item.title=='区域'||item.title=='意向'||item.title=='薪资范围'||item.title=='更多'?'no':'change'">
					<text>{{item.title}}</text>
					<text class='iconfont fontclassarrow_down' style='font-size: 16rpx;'></text>
				</view>
				<!-- <image src="/static/index/bottom.png"></image> -->
			</view>
		</view>
		<Popup @getPouup="getPouup" ref="popup" style='z-index: 5;' />
	</view>
</template>

<script>
	import Popup from './popup/popup.vue'

	export default {
		components: {
			Popup
		},
		props: {
			forms: Object,
			area: Array
		},
		data() {
			return {
				form: {
					areas_id: '', //地区id
					position_id: '', //1级需求分类id
					position_id2: '', //2级需求分类id
					salary_id: '', //薪资id
					welfare_id: [], //福利待遇
					age_id: '', //需求年限
					drving_id: '', //学历要求
					secondary: '', //需求类型
					gender: 2,
					refresh_time: '',
					date: ''
				},
				areaList: [{
						title: '区域',
						type: 'areas',
						id: ''
					}
				],
			}
		},
		watch: {
			forms(newval, old) {
				this.form = newval
			},
			//#ifdef MP-WEIXIN
			area(newval, old){
				this.areaList = newval
				immediate: true
				deep:true
			},
			//#endif
			//#ifdef APP-PLUS
			area: {
				handler(newval) {
					if (newval) {
						this.areaList = newval
					}
				},
				immediate: true,
				deep: true
			},
			//#endif
		},
		mounted() {
			let that = this
		},
		methods: {
			getDrop(item) {
				this.$refs.popup.getpopup(item)
			},
			popupShow(item) {
				if (item.type == 'areas') {
					this.$refs.popup.areas()
				}
				if (item.type == 'salary') {
					this.$refs.popup.salary()
				}
				if (item.type == 'position') {
					this.$refs.popup.position()
				}
				if (item.type == 'more') {
					this.$refs.popup.more()
				}
			},
			getPouup(e) {
				if (e.type == 'areas') {
					this.form.areas_id = e.id
					if (e.title == '全部') {
						this.areaList[0] = {
							title: '接单区域',
							type: 'areas',
							id: ''
						}
					} else {
						this.areaList[0] = e
					}
				} else if (e.type == 'salary') {
					this.form.salary_id = e.id
					if (e.title == '全部') {
						this.areaList[2] = {
							title: '薪资范围',
							type: 'salary',
							id: ''
						}
					} else {
						this.areaList[2] = e
					}
				} else if (e.type == 'more') {
					this.form.age_id = e.age_id
					this.form.drving_id = e.drving_id
					this.form.secondary = e.secondary
					this.form.welfare_id = e.welfare_id
					this.form.gender = e.gender
					this.form.refresh_time = e.refresh_time
					this.form.date = e.date.join()
					if(e.reset=='reset'){
						this.areaList[3] = {
							title: '更多',
							type: 'more',
							id: ''
						}
					}
					else{
						this.areaList[3] = {
							title: ' 更多',
							type: 'more',
							id: ''
						}
					}
				} else if (e[0].type == 'position1') {
					this.form.position_id = e[0].id
					if (e.length == 1) {
						this.form.position_id2 = ''
						if (e[0].title == '全部') {
							this.areaList[1] = {
								title: '接单信息',
								type: 'position',
								id: ''
							}
						} else {
							this.areaList[1].title = e[0].title
						}
					} else if (e.length == 2) {
						this.form.position_id2 = e[1].id
						this.areaList[1].title = e[0].title + '/' + e[1].title
					}
				}
				this.$forceUpdate()
				this.$emit('getForm', this.form)
			}
		}
	}
</script>

<style scoped lang="scss">
	.drop-index {
		z-index: 10;
		padding: 17rpx 20rpx;
		background: #F5F5F5;

		.drop-box {
			display: flex;
			justify-content: space-between;
			font-size: 28rx;
			font-weight: 400;
			color: #999999;

			.droplist {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0 16rpx;

				.no {
					display: flex;
					align-items: center;
					max-width: 100px;
					overflow: hidden;
					/*隐藏*/
					white-space: nowrap;
					/*不换行*/
					text-overflow: ellipsis;
					/* 超出部分省略号 */
				}

				.change {
					display: flex;
					align-items: center;
					max-width: 100px;
					overflow: hidden;
					/*隐藏*/
					white-space: nowrap;
					/*不换行*/
					text-overflow: ellipsis;
					/* 超出部分省略号 */
					color: #FF7700;
				}
			}

			image {
				margin-left: 10rpx;
				width: 12rpx;
				height: 8rpx;
			}
		}
	}
</style>
